<template>
	<view>
		<!-- <view class="btn" @click="enterRoom()">开启录制</view> -->
		<!-- <view class="btn" @click="destroyInstance()">销毁</view> -->
		<view class="btn" :animation="animationData"></view>
		<view class="btnConter">
			<!-- <view class="yuan"></view>
			<view class="yuan1"></view>
			<view class="yuan2"></view>
			<view class="yuan3"></view> -->
		</view>

		<view class="btnConterText" @click="enterRoom()">{{title}}</view>
	</view>
</template>

<script>
	import permision from "@/common/permission.js"
	import TrtcCloud from '@/TrtcCloud/lib/index';
	import {
		TRTCAppScene,
		TRTCVideoStreamType,
		TRTCAudioRoute,
		TRTCAudioQuality,
		TRTCVideoResolution,
		TRTCVideoResolutionMode,
		TRTCVideoEncParam
	} from '@/TrtcCloud/lib/TrtcDefines';
	import genTestUserSig from '@/debug/GenerateTestUserSig';
	import TrtcLocalView from '@/TrtcCloud/view/TrtcLocalView';
	import TrtcRemoteView from '@/TrtcCloud/view/TrtcRemoteView';
	import {
		mapState
	} from 'vuex';
	export default {

		data() {
			return {
				animationData: {},
				animationData1: {},
				animationData2: {},
				trtcCloud: null,
				sdkAppId: 0,
				userSig: '',
				// roomId: Math.floor(Math.random() * 100000),
				roomId: '',
				userId: '',
				appScene: TRTCAppScene.TRTCAppSceneVideoCall, // TRTCAppSceneVideoCall
				isFrontCamera: true,
				streamType: TRTCVideoStreamType.TRTCVideoStreamTypeBig,
				remoteUserId: '',
				audioRoute: TRTCAudioRoute.TRTCAudioRouteSpeaker,
				remoteAudioMuteState: false,
				localAudioMuteState: false,
				localVideoMuteState: false,
				title: '开始服务',
				type: null,
				timestamp: null,
				services_time: '',
				screenshoot: [],
				images: [],
				service_times:''
			}
		},
		computed: {
			...mapState(['user'])
		},
		onLoad(e) {
			console.log("页面传值", e)
			console.log(this.user)
			this.type = e.type
			this.timestamp = e.timestamp
			if (e.services_time) {
				this.services_time = e.services_time
			}
			if(e.service_times){
				this.service_times = e.service_times
			}
			// this.$moment().unix() // 返回值为数值型
			if (e.type === 'insurance') {
				this.initClickCopy(e.order_id, e.type)
			} else {
				this.initClick(e.order_id, e.type)
			}

			// this.initClick()
			if (e.name) {
				this.title = e.name;
				uni.setNavigationBarTitle({
					title: e.name
				})
			}
		},
		mounted() {
			if (uni.getDeviceInfo().platform === 'android') {
				permision.requestAndroidPermission('android.permission.RECORD_AUDIO');
				permision.requestAndroidPermission('android.permission.CAMERA');
			}
		},
		onShow() {
			var animation = uni.createAnimation({
				duration: 1000,
				timingFunction: 'linear',
			})
			var animation1 = uni.createAnimation({
				duration: 1000,
				timingFunction: 'linear',
			})
			var animation2 = uni.createAnimation({
				duration: 1000,
				timingFunction: 'linear',
			})
			this.animation = animation
			this.animation1 = animation1
			this.animation2 = animation2
			setInterval(function() {
				// animation2.translate3d(20,20,20).setp()
				animation1.scale(1.1, 1.1).step()
				animation1.scale(1, 1).step()
				animation.scale(1.2, 1.2).step()
				animation.scale(1, 1).step()
				this.animationData = animation.export()
				this.animationData1 = animation1.export()
				// this.animationData2 = animation2.export()
			}.bind(this), 1000)
		},
		methods: {
			async initClick(id, type) {
				// async initClick() {
				var that = this
				// setTimeout(() => {
				// 	that.show = false;
				// }, 3000)
				await uni.request({
					url: '/Trtc/init',
					method: 'post',
					data: {
						// order_id: 6,
						// type: "homeking"
						order_id: id,
						type: type
					},
					success: res => {
						console.log("res", res)
						this.roomId = res.data.room_id
						this.userId = this.user.id
						this.screenshoot = res.data.screenshoot
						this.images = res.data.images
					}
				});
			},
			async initClickCopy(id, type) {
				// async initClick() {
				var that = this
				// setTimeout(() => {
				// 	that.show = false;
				// }, 3000)
				await uni.request({
					url: '/Trtc/initAdmin',
					method: 'post',
					data: {
						// order_id: 6,
						// type: "homeking"
						order_id: id,
						type: type,
						user_type: 2,
						service_times:this.service_times
					},
					success: res => {
						console.log("res", res)
						this.roomId = res.data.room_id
						this.userId = res.data.user_id
						this.screenshoot = res.data.screenshoot
						this.images = res.data.images

					}
				});
			},
			enterRoom() {
				const res = uni.getAppAuthorizeSetting()
				// console.log("czxczczx", res)
				if (res.cameraAuthorized != 'authorized' || res.microphoneAuthorized != 'authorized') {
					// console.log("reeeee", res)
					if (uni.getDeviceInfo().platform === 'android') {
						permision.requestAndroidPermission('android.permission.RECORD_AUDIO');
						permision.requestAndroidPermission('android.permission.CAMERA');
					} else if (uni.getDeviceInfo().platform === 'ios') {
						permision.judgeIosPermission('camera')
						permision.judgeIosPermission('record')
					}
					return;
				}
				getApp().globalData.insuranceStr = {}
				if (this.images.length > 0) {
					const str = {
						info: ""
					}
					const arr = this.images
					const arr1 = []
					arr.forEach(item => {
						str.info = item
						arr1.push(str)
					})
					// console.log("arr1"arr1)
					console.log("str", str)
					getApp().globalData.inspectList = arr1
				} else {
					const arr = []
					// uni.setStorageSync('inspectList', arr);
					getApp().globalData.inspectList = arr
				}

				console.log(this.screenshoot)
				if (this.services_time) {
					uni.navigateTo({
						url: '/pages/common/rtmp/plugFlow?userId=' + this.userId + '&roomId=' + this.roomId + '&type=' +
							this.type + '&timestamp=' + this.timestamp + '&services_time=' + this.services_time +
							'&screenshoot=' + JSON.stringify(this.screenshoot)
					})
				} else {
					uni.navigateTo({
						url: '/pages/common/rtmp/plugFlow?userId=' + this.userId + '&roomId=' + this.roomId + '&type=' +
							this.type + '&timestamp=' + this.timestamp + '&screenshoot=' + JSON.stringify(this
								.screenshoot)
					})
				}

			}

		}
	}
</script>

<style>
	.btn {
		width: 276rpx;
		height: 276rpx;
		background: #C7F1D1;
		position: fixed;
		top: 0;
		left: 0;
		margin: auto;
		bottom: 0;
		right: 0;
		border-radius: 100%;
	}



	.btnConter {
		position: fixed;
		top: 0;
		left: 0;
		margin: auto;
		bottom: 0;
		right: 0;
		width: 228rpx;
		height: 227rpx;
		padding-top: 1rpx;
		background: #B3EAC0;
		border-radius: 100%;
		animation: myRotate 10s linear infinite;
	}

	.yuan {
		width: 20rpx;
		height: 20rpx;
		background: #4CBD66;
		border-radius: 100%;
		float: left;
		margin-left: 104rpx;
		margin-top: -10rpx;
	}

	.yuan1 {
		width: 20rpx;
		height: 20rpx;
		background: #4CBD66;
		border-radius: 100%;
		float: left;
		margin-left: -134rpx;
		margin-top: 104rpx;

	}

	.yuan2 {
		width: 20rpx;
		height: 20rpx;
		background: #4CBD66;
		border-radius: 100%;
		float: left;
		margin-left: 218rpx;
		margin-top: 104rpx;
	}

	.yuan3 {
		width: 20rpx;
		height: 20rpx;
		background: #4CBD66;
		border-radius: 100%;
		float: left;
		margin-left: 104rpx;
		margin-top: 80rpx;
	}

	@keyframes myRotate {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.btnConterText {
		position: fixed;
		top: 0;
		left: 0;
		margin: auto;
		bottom: 0;
		right: 0;
		width: 176rpx;
		height: 176rpx;
		background: #4CBD66;
		border-radius: 100%;
		/* margin: 24rpx auto; */
		line-height: 176rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>